<template>
  <div class="form-box">
    <div class="title">
      <input type="checkbox" v-model="form.satellite.show" />
      卫星
    </div>
    <div v-if="form.satellite.show">
      <div class="label">位置</div>
      <div style="display: flex; gap: 10px">
        <input type="number" min="0" max="360" step="1" v-model="form.satellite.rotate[0]" />
        <input type="number" min="0" max="360" step="1" v-model="form.satellite.rotate[1]" />
        <input type="number" min="0" max="360" step="1" v-model="form.satellite.rotate[2]" />
      </div>
      <div class="label">速度</div>
      <input type="range" min="0" max="1" step="0.01" v-model="form.satellite.speed" />
    </div>
    <div class="title"><input type="checkbox" v-model="form.scanning.show" />扫光</div>
    <div>
      <div class="label">坐标</div>
      <select v-model="form.scanning.position">
        <option value="-86">北京</option>
        <option value="-85">日本</option>
        <option value="-84">美国</option>
      </select>
      <div class="label">速度</div>
      <input type="range" min="0" max="10" step="0.1" v-model="form.scanning.speed" />
    </div>
    <div class="title"><input type="checkbox" v-model="form.countrygdp.show" />光柱</div>
    <div>
      <div class="label">高度</div>
      <input type="range" min="0" max="1000" step="1" v-model="form.countrygdp.height" />
    </div>
    <div class="title"><input type="checkbox" v-model="form.flyline.show" />飞线</div>
    <div>
      <div class="label">速度</div>
      <input type="range" min="0" max="10" step="0.1" v-model="form.flyline.speed" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineEmits, watch, ref } from 'vue';
const form = ref({
  satellite: {
    show: true,
    speed: 1,
    rotate: [-70, 20, 100]
  },
  scanning: {
    show: true,
    speed: 1,
    position: [-86, 20, 100]
  },
  countrygdp: {
    show: true,
    height: 100
  },
  flyline: {
    show: true,
    speed: 1
  }
});
const emit = defineEmits(['update:modelValue']);
watch(
  () => form,
  () => {
    emit('update:modelValue', form.value);
  },
  { deep: true }
);
</script>

<style lang="less" scoped>
.form-box {
  top: 50%;
  left: 20px;
  z-index: 1000;
  color: #fff;
  position: fixed;
  font-size: 12px;
  transform: translateY(-50%);

  .title {
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
  }

  .label {
    font-size: 12px;
  }
}

input {
  display: block;
}

input[type='range'] {
  --size: 10px;
  --color: #409eff;
}
</style>
